import { useEffect, useState } from 'react';
import { isArray, DownLoadOutlined } from 'esy-ui';
import { postMain } from '@/services';
import { useGlobalStore } from '@/mobx';
import { Img } from '@/components';

const defList = [
  {
    url: 'https://www.baidu.com',
    id: 1,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 2,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 3,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 4,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 5,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 6,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    url: 'https://www.baidu.com',
    id: 7,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
];

interface GridProps {
  id: number | string;
}

function Grid({ id }: GridProps) {
  const [list, setList] = useState(defList);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    let api = postMain;
    if (id === 1) {
      api = postMain;
    }
    api()
      .then((res?: any) => {
        if (isArray(res?.data)) {
          setList(res?.data);
        }
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState, id]);

  return (
    <div className='grid grid-cols-5 gap-3 p-3'>
      {list.map((it) => (
        <div key={it.id} className='flex flex-col'>
          <Img src={it.src} boxClassName='rounded-xl overflow-hidden' />
          <div className='text-sm'>{it.title}</div>
          <div className='rounded-full px-1 text-text-2 border-text-2 border flex items-center justify-center h-6 text-xs'>
            <DownLoadOutlined className='text-text-2 mr-1' />
            下载
          </div>
        </div>
      ))}
    </div>
  );
}

export default Grid;
